<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="css/iconfont.css">
	<style type="text/css">
		
		.wrapper{
			width: 400px;
			min-height: 100px;
			border: 1px solid #ccc;
			margin-left: :100px ;
		}

		.header{
			height: 45px;
			line-height: 45px;
			background-color: #8eb9f5;
			text-align: center;
			color: #fff;
		}

		.header h3{
			margin: 0;
			padding-right: 20px;
		}

		.item{
			padding: 20px;
			width: 400px;
		}

		.item button{
			background-color:#8eb9f5;
			color: #fff;
			height: 35px;
			line-height: 35px;
			margin-top:15px; 
			margin-right: 10px;
			border: none;
			border-radius: 5px;
		}
		
	</style>
</head>
<body>


<div class="wrapper">
	<div class="header">
		<h3><span class="iconfont icon-54" style="float: left;margin-left:30px;font-size: 20px;"></span> 请选择省份 </h3>
	</div>

	<div class="area-wrapper" style="position: relative;">

		<!--省-->
		<div class="province item" >
			<button>广西壮族自治区</button>
			<button>河南</button>
			<button>广东</button>
			<button>湖南</button>
			<button>湖北</button>
			<button>江西</button>
			<button>江苏</button>
			<button>安徽</button>
		</div>

		<!---市-->
		<div class="city item" style="position:absolute;top: 0px;right:-450px;border: 1px solid red;display: none;">
			<button>柳州</button>
			<button>南宁</button>
			<button>河池</button>
			<button>郑州</button>
			<button>开封</button>
			<button>洛阳</button>
		</div>

		<!--区-->
		<div class="area item" style="position: absolute;top: 45px;right: -900px; border: 1px solid pink;display: none;">
			<button>城中区</button>
			<button>柳北区</button>
			<button>柳南区</button>
			<button>鱼峰区</button>
			<button>柳江区</button>
			<button>柳城县</button>
		</div>

	</div>
</div>


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	/**初始化省份div框
		1. 先把省份div框中的静态数据移出掉
	**/
	$('.icon-54').click(function(){
		/*city框的显隐状态*/
		var cflag=$('.city').css('display');
		/*area*/
		var aflag=$('.area').css('display');

		if(cflag=='block'&& aflag=='block'){
			$('.area').hide();
		}
		if(cflag=='block'&& aflag=='none'){
			$('.city').hide();
		}
	})
	function compselect(){
		$('.city').hide();
		$('.area').hide();
	}


	function showarea(btn){
		/**获取城市按钮的value 值*/
		var cid = $(btn).val();

		/**隐藏province , area 这两个div,同时展示city面板内容*/
		$('.province').show();
		$('.area').show();
		$('.city').show();

		/**获取并过滤数据**/
		$.get('data/area.json',function(res){
			/**过滤数据**/
			var tmp=[];
			for(var i=0;i<res.length;i++){
				if(cid ==res[i].pid){
					tmp.push(res[i]);
				}
			}

			/**显示数据*/
			$('.area').empty();
			for(var i=0;i<tmp.length;i++){
				var btn = '<button onclick="compselect" value="'+tmp[i].id+'">'+tmp[i].name+'</button>';
				$('.area').append(btn);
			}


		});
	}

	function showcity(btn){
		/**获取省份按钮的value值---id**/
		var pid = $(btn).val();
		// console.log("省份id==="+pid);

		/**隐藏province , area 这两个div,同时展示city面板内容*/
		$('.province').show();
		$('.area').hide();
		$('.city').show();

		/**获取所有城市信息并过滤**/
		$.get('data/city.json', function(res){
		/**过滤城市的数据*/
		var tmp = [];
		for(var i=0;i<res.length;i++){
			if(pid == res[i].pid){
				console.log(res[i]);
				tmp.push(res[i]);
			}
		}

		/**将省份下面的城市显示到.city div下面*/
		$('.city').empty();
		for(var i=0;i<tmp.length;i++){
			var btn = '<button onclick="showarea(this)" value="'+tmp[i].id+'">'+tmp[i].name+'</button>';
			$('.city').append(btn);
		}
		})
		
	}
	

	function InitProvince(){

		$('.province').empty();

		$.get('data/province.json',function(res){
			for(var i=0;i<res.length;i++){
				/**用字符串拼接一个 button**/
				var btn='';
				btn = '<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>';			 
				$('.province').append(btn);
			}	
		});
	}


	InitProvince();

	

</script>
</body>
</html>